<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="video-box" :style="'height:'+windowHeight+'px'">
					<video :src="videoUrl" autoplay="true" loop></video>
				</view>
				<view class="route-page">
					<view class="shop-info">
						<view class="shop-name-box flexWrapNo">
							<image src="../static/home/navigation-icon.png" class="navigation-icon"></image>
							<view class="shop-name">{{storeInfo.shop_name}}</view>
						</view>
						<view class="address-info flexWrap">
							<text>{{storeInfo.location||'加载中...'}}</text>
							<view class="distance">{{storeInfo.distance}}  <image src="../static/home/righttop.png" class="righttop"></image> </view>
						</view>
					</view>
					<view class="route-box flexWrapNo">
						<image src="../static/home/bus-icon.png" class="route-img"></image>
						<view class="route-text">
							<view class="route-title">公共交通</view>
							<view>{{storeInfo.bus_routes||'加载中...'}}</view>
						</view>
					</view>
					<view class="route-box flexWrapNo">
						<image src="../static/home/driving-icon.png" class="route-img"></image>
						<view class="route-text">
							<view class="route-title">驾车路线</view>
							<view>{{storeInfo.driving_route||'加载中...'}}</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				storeInfo:{},
				bannerList:[],
				videoUrl:"https://moyu24h.oss-cn-chengdu.aliyuncs.com/miniProgramUpload/2024-07-01/17198207329702973.mp4",
				windowHeight:""
			}
		},
		onLoad() {
			this.storeDetails();
		},
		created() {
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync()
		
			this.windowHeight = windowHeight;
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			storeDetails(){
				this.$request.post(this.$api.storeDetails, {
					store_id:uni.getStorageSync('store_id'),
					longitude:uni.getStorageSync('longitude')||"106.540541",
					latitude:uni.getStorageSync('latitude')||"29.590991"
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if(data.entrance_image){
						this.bannerList=data.entrance_image.split(',')
					}
					if (res.code==1) {
						this.storeInfo=data
						this.storeInfo.entrance_image=this.storeInfo.entrance_image
					}
				})
			},
			// 导航
			navigation() {
				let latitude = this.storeInfo.latitude;
				let longitude =  this.storeInfo.longitude;
				let name = this.storeInfo.shop_name;
				let address = this.storeInfo.location;
				if (!latitude || !longitude || !name) {
					uni.showToast({
						title: '打开地图失败,该地址无法查询到',
						duration: 2000,
						icon: 'none'
					});
					console.log(latitude)
					console.log(longitude)
					console.log(name)
					return;
				}
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					name: name,
					address: address,
					fail: res => {
						console.log(res);
						uni.showModal({
							content: '打开地图失败,该地址无法查询到'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.video-box{
		height: 100%;
		width: 100%;
		video{
			height: 100%;
			width: 100%;
		}
	}
	.route-page{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		padding: 64upx 32upx;
	}
	.shop-info{
		margin-top: 28upx;
		.shop-name-box{
			.shop-name{
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 600;
				line-height: 50upx;
				color: #FFFFFF;
			}
			.navigation-icon{
				width: 30upx;
				height: 40upx;
				margin-right: 20upx;
			}
		}
		.address-info{
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color:#BCB6B5;
			margin-top: 14upx;
			align-items: baseline;
		}
		.distance{
			width: 185rpx;
			height: 72rpx;
			line-height: 72upx;
			text-align: center;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			border: 2rpx solid rgba(255,255,255,0.2);
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 26rpx;
			color: #FFFFFF;
			flex: none;
			.righttop{
				width: 20upx;
				height: 20upx;
				margin-left: 10upx;
			}
		}
	}
	.route-box{
		background:#232428;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 38upx;
		flex: auto;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #919294;
		padding: 30upx;
		align-items: flex-start;
		line-height: 46upx;
		.route-img{
			width: 96upx;
			height: 96upx;
			margin-right: 20upx;
			flex: none;
		}
		.route-title{
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 34rpx;
			color: #FFFFFF;
			text-stroke: 1px #FFFFFF;
			margin-bottom: 8upx;
		}
	}
</style>
